<template>
  <div class="sign_list">
    <div class="search">
      <div class="item" v-for="(item, index) in queryList" :key="index" :class="item.active ? 'active' : ''"
        @click="handleOpen(item.code)">
        {{ item.title }}
        <el-icon>
          <CaretBottom />
        </el-icon>
      </div>
      <!-- <div class="item"> 赛事时间 <el-icon>
          <CaretBottom />
        </el-icon></div> -->
    </div>
    <TeamInfo :user-name="$route.query.userName"></TeamInfo>

    <div class="data_list data-list-player-match">
      <div class="data" v-for="(item, index) in dataList" :key="index">
        <div class="info">
          <div class="title">{{ item.match_name }} <!--<span class="link" @click="toTicket(item.detail)">查看参赛证</span>--></div>
          <div class="attr">{{ item.begindate }}</div>
        </div>
        <div class="item" v-for="(item2, index) in item.detail" :key="index">
          <div class="state">
            <MatchRecordStatus :info-status="item2.status"></MatchRecordStatus>
          </div>
          <div class="title"> {{item2.item_name}} </div>
          <div class="attr">报名时间：{{item2.create_date}}</div>
          <div class="btns">
            <el-button type="text" @click="handleQuery(item2.id)">参赛信息</el-button>
            <!-- <el-button type="text" @click="scoreQuery">参赛成绩</el-button>
            <el-button type="text" @click="handleCertificate">获奖证书</el-button> -->
          </div>
        </div>
      </div>
    </div>
  </div>
  <drawerSelect ref="dsRef" :title="currentSelect.title" :code="currentSelect.code" @getDateVal="getDateVal">
    <div class="drawer-select">
      <div v-for="(item, index) in currentSelect.items" :key="index" class="item" @click="handleSelect(item.code)"
        :class="item.code === currentSelect.value ? 'active' : ''">
        {{ item.name }} <el-icon color="#00A0E9"><Select /></el-icon>
      </div>
    </div>
  </drawerSelect>

</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from "vue";
import listService from "@/utils/listServiceWap";
import router from "@/router";
import baseService from "@/utils/baseService";
import { getCache } from "@/utils/cache";
import TeamInfo from "@/components/user/TeamInfo.vue";
import drawerSelect from "@/components/DrawerSelect.vue";
export default defineComponent({
  components: {
    TeamInfo,
    drawerSelect
  },
  mounted() {
    //查询地区
    baseService.areaList({ code: 0, }, (response: any) => {
      response.unshift({ code: "", name: "全部" });
      this.queryList[1].items = response;

    });
    const _id = getCache('CacheToken', { isSessionStorage: true }, {})['id'];
    const _realName = getCache('CacheToken', { isSessionStorage: true }, {})['realName'];
    const teamId = getCache("CacheToken", { isSessionStorage: true }, {})["teamId"];
    this.dataForm.userId = '' + (this.$route.query.userId ? this.$route.query.userId : _id);

    this.query();
  },
  setup() {
    const dsRef = ref()
    const state = reactive({
      getDataListURL: "/front/fast/match/matchRecord/page?pageSize=10",
      getDataListIsPage: true,
      deleteURL: "/pay/order",
      deleteIsBatch: true,
      activatedIsNeed: true,
      createdIsNeed: false,
      dataForm: {
        userId: '',
        city: '',
        season: '',
        matchLevel: '',
        province: '',
        beginDate: '',
        endDate: '',
        searchStr: ''
      }
    });
    return { ...listService(state), ...toRefs(state), dsRef };
  },

  data() {
    return {
      queryList: [
        {
          title: "赛事层级", active: false, code: 'matchLevel', value: ''
          , items: [{ code: "", name: "全部" }, { name: "国赛", code: "1" }, { name: "省赛", code: "2" }, { name: "市赛", code: "3" }]
        },
        { title: "赛事地区", active: false, code: 'province', value: '' },
        { title: "赛事时间", active: false, code: 'date', value: {} }
      ],
      currentSelect: {
        code: '',
        title: '选择框',
        value: '北京',
        items: []
      },
      userName: "",
      dataList: [{}, {}, {}, {}],

      areaCity: { code: '0', item: [] },
      area: { code: '0', item: [] },
      dates: null,
      dates1: null,
      dialogVisible: false,
      isCollapse: 1,
      isNavCollapse: false,
      showDialogFlag: false,
      evaluationDialogFlag: false,
      updateForm: {
        id: null,
        schoolName: '',
        evaluation: ''
      }, tableData: [
        {
          no: "111",
          name: "学校A",
          course: "10",
          teacher: "10",
          student: "10"
        },
      ],
      formLabelWidth: '120px',
    };
  },

  methods: {
    //打开下拉
    handleOpen(code: string) {
      this.queryList.forEach((item: any) => {
        item.active = item.code === code;
        if (item.active) {
          this.currentSelect = item;

        }
      });
      this.dsRef.open();
    },


    //选中下拉框
    handleSelect(code: string) {
      this.currentSelect.items.forEach((item: any) => {
        if (item.code === code) {
          this.currentSelect.value = code === this.currentSelect.value ? '' : code;
        }
      })
      this.dsRef.close();
      this.assembleSelectData();
    },
    /**
     * 顶部日期回调，子组件调用
     * @param e
     */
    getDateVal(e: any) {
      this.dataForm.beginDate = e.minDate;
      this.dataForm.endDate = e.maxDate;;
      this.assembleSelectData();
    },
    /**
    * 组装顶部下拉数据
    */
    assembleSelectData() {
      this.dataForm.matchLevel = "" + this.queryList[0].value;
      this.dataForm.province = "" + this.queryList[1].value;
      this.page = 1;
      this.query();
    },
    /**
     * 查看参赛证
     * @param detail
     */
    toTicket(detail: any) {
      if(detail && detail.length>0){
        let url = detail[0].ticket_url;
        window.open(url);
      }
    },

    /**
     * 参赛信息
     * @param id
     * @param userId
     */
    handleQuery(id: any) {
      router.push("/match/player_match_info?id=" + id + "&userId=" + this.dataForm.userId);
    },

    // /**
    //  * 参赛成绩
    //  * @param id
    //  */
    // scoreQuery(id: any) {
    //   router.push("/enroll/enrollInfo?id=" + id);
    // },

    // /**
    //  * 查询获奖证书
    //  */
    // handleCertificate() {
    //   router.push("/match/certificate");
    // },


    /**
     * 表单重置
     */
    reset: function () {
      if (this.dataForm) {
        this.dataForm = {
          userId: this.dataForm.userId,
          season: '',
          matchLevel: '',
          city: '',
          province: '',
          beginDate: '',
          endDate: '',
          searchStr: ''
        };

      }
    },




  }
});
</script>


<style lang="scss" scoped>
@import "./style.scss";
</style>
